
<template>
    <div>
        <el-button type="primary" @click="dialogFormVisible = true;init()">新增</el-button>
        <el-table :data="list" style="width: 100%">
        
            <el-table-column prop="title" label=" 标题" width="180"></el-table-column>
            <el-table-column prop="chapterName" label=" 章节" width="180"></el-table-column>
            <el-table-column prop="catName" label=" 分类" width="180"></el-table-column>
            <el-table-column prop="descrition" label=" 描述" width="180"></el-table-column>
            <el-table-column prop="userName" label="创建人" width="180"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
            
            <el-table-column label="操作">
                <template slot-scope="props">
                    <el-button type="primary" @click="changeBranch = true;handleEdit(props.row.id)" size="mini">修改</el-button>
                </template>
            </el-table-column>

        </el-table>

        
        <el-dialog title="新增异常" :visible.sync="dialogFormVisible" >
        <el-form >
            <el-select v-model="userException.catId" filterable placeholder="请选择分类">
                <el-option
                v-for="item in exceptionCatList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>

            <el-select v-model="userException.chapterId" filterable placeholder="请选择章节">
                <el-option
                v-for="item in chapterList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>

            <el-upload
                class="upload-demo"
                action="http://localhost:9002/userException/upload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :file-list="fileList"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1M</div>
                </el-upload>
            <el-form :inline="true" class="demo-form-inline">
             <el-input type="text" placeholder="标题" v-model="userException.title" :maxlength="100" show-word-limit> </el-input>  
            <el-input type="textarea" placeholder="描述" v-model="userException.descrition" :maxlength="100" show-word-limit></el-input>
            <el-input type="textarea" placeholder="分析" v-model="userException.analysis" :maxlength="100" show-word-limit></el-input>  
            <el-input type="textarea" placeholder="解决" v-model="userException.solve" :maxlength="100" show-word-limit></el-input>                                                                   
            </el-form>           
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
        </div>
        </el-dialog> 
    </div>
</template>
<script>
import scoreApi from '@/api/score'
import exceptionCatApi from '@/api/exceptionCat'
import chapterApi from '@/api/chapter'
import userExceptionApi from '@/api/userException'

export default {
    data(){
        return {
            exceptionCatList:[],
            chapterList:[],
            userException:{},
            urls:[],
            list:[],
            fileList: [],
            textarea: '',
            dialogFormVisible:false,
            personalScore:{
                personalScoreList:[
                    {optionId:6,score:50,content:""},
                    {optionId:7,score:50,content:""}
                ],
            },//组合实体类
            num: 50,
            options: [],
                    value: ''            
                    }
    },
    created(){
        this.fetchData();
    },
    methods:{
         handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },

      handleSuccess(response,file){
        console.log(response);
        console.log(file);
        console.log(file.url);
        this.fileList.push(file);
        var list = response.data;
        if(list != null && list.length > 0){
            this.userException.url = list[0];
            this.urls.push(list[0]);
            this.userException.urls = this.urls + "";
        }
        //this.userException.url = file.url;
      }
      
      ,
        fetchData(){


            //查询自己的异常列表
            userExceptionApi.findByUserId().then(response => {
                this.list=response.data;
            });

            //查询分类
            exceptionCatApi.findAll().then(response => {
                this.exceptionCatList=response.data;
            });

            //查询章节
            chapterApi.findAll().then(response => {
                this.chapterList=response.data;
            });
        },
        handleChange(value) {
        },

        init(){
            this.userException = {};
        },
        
         handleEdit(id){
            this.dialogFormVisible=true;//打开窗口
            //调用查询
            if(id!=''){
                userExceptionApi.findById(id).then( response=>{
                    if(response.flag){
                        this.userException=response.data;
                    }
                })                   
            }else{
                this.userException = {};
            }

        },
        save(){
            
            console.log(this.userException);
            userExceptionApi.add(this.userException).then(response => {
                this.dialogFormVisible = false;
                this.$message({
                    message: response.message,
                    type: (response.flag?'success':'error')
                });                
                this.fetchData();
            })
        }
    }
}
</script>